<template>
	<view class="control">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(47, 117, 250, 0)"></QSNavbar>
		<view class="flex-col page">
		  <view class="flex-col group_4">
		    <view class="flex-col">
		      <text class="text_2">已完成</text>
		      <text class="text_3">订单已完成</text>
		      <view class="flex-col group_6">
		        <view class="flex-row section_2">
		          <image
		            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16506941482533224078.png"
		            class="image_5"
		          />
		          <view class="flex-col items-start group_7">
		            <text class="text_7">【上海】全民健身游泳课</text>
		            <view class="flex-col text-wrapper"><text class="text_8">7月28日10:00-12:00</text></view>
		            <text class="text_9">×1</text>
		          </view>
		        </view>
		        <view class="flex-col section_3">
		          <text class="text_10">订单信息</text>
		          <view class="divider"><!--*--></view>
		          <view class="justify-between group_8 view">
		            <text class="text_11">订单编号</text>
		            <text class="text_13 text_14">3161333</text>
		          </view>
		          <view class="justify-between group_9">
		            <text class="text_15">商品价格</text>
		            <text class="text_17">￥612</text>
		          </view>
		          <view class="justify-between group_8">
		            <text class="text_11">优惠券抵扣</text>
		            <text class="text_13 text_19">￥15</text>
		          </view>
		          <view class="justify-between group_9">
		            <text class="text_15">实际支付</text>
		            <text class="text_21">￥597</text>
		          </view>
		          <view class="justify-between group_8">
		            <text class="text_11">创建时间</text>
		            <text class="text_13 text_23">2020-03-17 15:26:32</text>
		          </view>
		          <view class="justify-between group_9">
		            <text class="text_15">支付时间</text>
		            <text class="text_25">2020-03-17 15:26:32</text>
		          </view>
		          <view class="justify-between group_8">
		            <text class="text_11">发货时间</text>
		            <text class="text_13 text_27">2020-03-17 15:26:32</text>
		          </view>
		          <view class="justify-between group_9">
		            <text class="text_15">成交时间</text>
		            <text class="text_29">2020-03-17 15:26:32</text>
		          </view>
		          <view class="justify-between group_9">
		            <text class="text_15">支付方式</text>
		            <text class="text_31">微信</text>
		          </view>
		          <view class="justify-between group_10">
		            <text class="text_32">收款方</text>
		            <text class="text_33">衡阳奥星</text>
		          </view>
		        </view>
		      </view>
		    </view>
		    <!-- <view class="flex-row group_11">
		      <view class="flex-col items-center text-wrapper_1"><text class="text_34">申请退单</text></view>
		      <view class="flex-col items-center text-wrapper_1 view_10"><text class="text_34">评价</text></view>
		    </view> -->
		  </view>
		</view>

	</view>
</template>

<script>
	import QSNavbar from '../components/QS-Navbar/QS-Navbar.vue';
	export default {
		components: {
			QSNavbar,
		},
		data() {
			return {
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '订单详情',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				tabActive: 0,
				tabList: [{
						name: '已报名'
					},
					{
						name: '已结束'
					}
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		/deep/ .QS-navbar {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 5;
		}
	}
	html {
		font-size: 16px;
	}
	
	view,
		image,
		text {
		  box-sizing: border-box;
		  flex-shrink: 0;
		}
		
		#app {
		  width: 100vw;
		  height: 100vh;
		}
		
		.flex-row {
		  display: flex;
		  flex-direction: row;
		}
		
		.flex-col {
		  display: flex;
		  flex-direction: column;
		}
		
		.justify-start {
		  display: flex;
		  justify-content: flex-start;
		}
		
		.justify-center {
		  display: flex;
		  justify-content: center;
		}
		
		.justify-end {
		  display: flex;
		  justify-content: flex-end;
		}
		
		.justify-evenly {
		  display: flex;
		  justify-content: space-evenly;
		}
		
		.justify-around {
		  display: flex;
		  justify-content: space-around;
		}
		
		.justify-between {
		  display: flex;
		  justify-content: space-between;
		}
		
		.items-start {
		  display: flex;
		  align-items: flex-start;
		}
		
		.items-center {
		  display: flex;
		  align-items: center;
		}
		
		.items-end {
		  display: flex;
		  align-items: flex-end;
		}
	.text-wrapper_1 {
	  flex: 1 1 330rpx;
	  padding: 26rpx 0 25rpx;
	  background-color: #ffffff;
	  border-radius: 40rpx;
	  height: 80rpx;
	}
	.group_8 {
	  margin-top: 39rpx;
	  padding: 0 19rpx;
	}
	.group_9 {
	  margin-top: 39rpx;
	  padding: 0 20rpx;
	}
	.text_34 {
	  color: #2f75fa;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 29rpx;
	}
	.text_11 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 29rpx;
	}
	.text_13 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 23rpx;
	}
	.text_15 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 29rpx;
	}
	.page {
	 background: linear-gradient(0deg, #FFFFFF, #FF4040);
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100vh;
	}
	.group_4 {
	  padding: 180rpx 30rpx 20rpx;
	  flex: 1 1 auto;
	  overflow-y: auto;
	}
	.group_11 {
	  margin-top: 180rpx;
	}
	.text_2 {
	  margin-left: 3rpx;
	  align-self: flex-start;
	  color: #ffffff;
	  font-size: 36rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 34rpx;
	}
	.text_3 {
	  margin-top: 30rpx;
	  align-self: flex-start;
	  color: #ffffff;
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 23rpx;
	}
	.group_6 {
	  margin-top: 20rpx;
	}
	.view_10 {
	  margin-left: 30rpx;
	}
	.section_1 {
	  padding: 32rpx 20rpx 29rpx;
	  background-color: #ffffff;
	  border-radius: 20rpx;
	}
	.section_2 {
	  margin-top: 20rpx;
	  padding: 30rpx 24rpx;
	  background-color: #ffffff;
	  border-radius: 20rpx;
	}
	.section_3 {
	  margin-top: 20rpx;
	  padding: 41rpx 0 39rpx;
	  background-color: #ffffff;
	  border-radius: 20rpx;
	}
	.text_4 {
	  color: #333333;
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 23rpx;
	}
	.text_5 {
	  margin-top: 30rpx;
	  color: #333333;
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 31rpx;
	}
	.text_6 {
	  margin-top: 29rpx;
	  color: #333333;
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 23rpx;
	}
	.image_5 {
	  border-radius: 10rpx;
	  width: 154rpx;
	  height: 154rpx;
	}
	.group_7 {
	  margin-left: 12rpx;
	  margin-top: 20rpx;
	  flex: 1 1 auto;
	}
	.text_10 {
	  margin-left: 24rpx;
	  align-self: flex-start;
	  color: #333333;
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 27rpx;
	}
	.divider {
	  margin-top: 39rpx;
	  height: 1rpx;
	  border: dashed 1rpx #bebebe;
	}
	.view {
	  margin-top: 38rpx;
	}
	.group_10 {
	  margin-top: 38rpx;
	  padding: 0 21rpx;
	}
	.text_7 {
	  color: #333333;
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 27rpx;
	}
	.text-wrapper {
	  margin-left: 19rpx;
	  margin-top: 30rpx;
	  padding: 7rpx 0;
	  background-color: #f3f3f3;
	  border-radius: 18rpx;
	}
	.text_9 {
	  margin-left: 20rpx;
	  margin-top: 32rpx;
	  color: #333333;
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 20rpx;
	}
	.text_14 {
	  margin: 3rpx 10rpx 3rpx 0;
	}
	.text_17 {
	  margin-right: 9rpx;
	  margin-bottom: 5rpx;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 23rpx;
	}
	.text_19 {
	  margin-right: 9rpx;
	  margin-bottom: 4rpx;
	}
	.text_21 {
	  margin: 3rpx 5rpx 3rpx 0;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 23rpx;
	}
	.text_23 {
	  margin: 3rpx 10rpx 3rpx 0;
	}
	.text_25 {
	  margin: 3rpx 10rpx 3rpx 0;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 23rpx;
	}
	.text_27 {
	  margin: 3rpx 10rpx 3rpx 0;
	}
	.text_29 {
	  margin: 3rpx 10rpx 3rpx 0;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 23rpx;
	}
	.text_31 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 29rpx;
	}
	.text_32 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 29rpx;
	}
	.text_33 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 700;
	  line-height: 29rpx;
	}
	.text_8 {
	  margin-left: 21rpx;
	  margin-right: 27rpx;
	  color: #888888;
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	}
</style>
